<template>
  <page-state-view :view-ready="viewReady">
    <div class="full~ p-10px box-border bg-gray-200">
      <div class="p-10px box-border bg-light-50 rounded between~">
        <div class="text-base">我的信息</div>
        <n-button type="info" @click="showModal = true">编辑</n-button>
      </div>
      <div class="mt-10px">
        <user-info-board :avatar="avatar" :nickname="nickname"/>
      </div>
    </div>
    <n-modal v-model:show="showModal"
             preset="card"
             title="编辑资料"
             :style="bodyStyle">
      <div>content</div>
    </n-modal>
  </page-state-view>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue"
import {useGet} from "@/hooks";
import {NButton, NModal} from "naive-ui"
import PageStateView from "@/components/viewComponents/PageStateView.vue";
import UserInfoBoard from "@/pages/profile/components/UserInfoBoard.vue";

export default defineComponent({
  components: {PageStateView, UserInfoBoard, NButton, NModal},
  setup() {
    const viewReady = ref(true)
    const avatar = ref("")
    const nickname = ref("")
    const showModal = ref(false)
    const bodyStyle = {
      width: "50%",
      height: "300px"
    }

    useGet({
      url: "/v1/user/info",
      params: {},
      success: (data) => {
        avatar.value = data.avatar
        nickname.value = data.user.nickname
        console.log(data)
      },
      fail: (message) => {
        console.log(message)
      }
    }, true)

    return {
      avatar,
      viewReady,
      nickname,
      showModal,
      bodyStyle
    }
  }
})


</script>

<style scoped>

</style>